<template>
  <Modal v-model="showModal" title="音频播放" :footer-hide="true" width="30%" class="audio-modal">
    <audio controls ref="audio" class="dt-audio">
      <source :src="srcAudio" type="audio/mpeg" />
      <source :src="srcAudio" type="audio/ogg" />
      <embed height="50" width="100" :src="srcAudio" />
    </audio>
    <div class="footer">
      <Button @click="downLoad" type="success">下载</Button>
      <Button @click="hide" style="margin-left: 10px">关闭</Button>
    </div>
  </Modal>
</template>

<script setup>
  import { ref } from 'vue'
  import toolApi from '@/biz/file.js'
  import dt from '@dt/dt'

  const [showModal, srcAudio, audio] = [ref(false), ref(''), ref()]

  function downLoad() {
    toolApi.downloadFile(
      srcAudio.value,
      '音频',
      '',
      'audio/mpeg;audio/ogg;audio/aac;audio/wav;audio/webm',
      'noHomologous'
    )
  }

  function show(data) {
    if (data) {
      srcAudio.value = data
      showModal.value = true
      audio.value.load()
      audio.value.play()
    } else {
      dt.ui.Message.warning('暂无录音')
    }
  }

  function hide() {
    audio.value.pause()
    showModal.value = false
  }

  defineExpose({
    show
  })
</script>

<style scoped lang="scss">
  .audio-modal {
    .dt-audio {
      width: 100%;
    }

    .footer {
      display: flex;
      justify-content: flex-end;
      margin-top: 10px;
    }
  }
</style>
